<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="./js/cookie.js"></script>
<script>
	var flag;
	var cnt=0;
	var id;
	var userName;
	function touchRock(){
		document.getElementById("rockImg").src="./images/rock_happy.png";
		setTimeout("document.getElementById('rockImg').src='./images/rock.png'",3000);
	}
	
	function transImg(){		
		var timerId = setInterval("proc(flag)",2000);	
		id = timerId;
	}
	
	function proc(getFlag){	
		if(cnt == 5){
			clearInterval(id);
		}
		if(getFlag){
			flag = false;
			document.getElementById("rockImg").src="./images/rock_happy.png";
			cnt++;
		}else{
			flag = true;
			document.getElementById("rockImg").src="./images/rock.png";
			cnt++;
		}	
	}
	
	function greet(){
		/* if(navigator.cookieEnabled) */
			userName=readCookie("uName");
		if(userName){
			alert("hi "+userName+" i missed you")
		}else{
			var name = prompt("what your  name","enter your name");
			alert(name+" !!! nice meet you");
			writeCookie("uName",name,1);
		}
	}
	
	function chkWindow(){
		alert(document.body.clientHeight+":"+document.body.clientWidth);
	}
	
	function chkWindow2(){
		alert(window.screen.availHeight+":"+window.screen.availWidth);
	}
	
	function resize(){
		document.getElementById("rockImg").style.height = (document.body.clientHeight-100)*0.9;
	}
</script>
</head>

  <body onload="transImg();resize();greet();" on>
    <div style="margin-top:100px; text-align:center">
      <img id="rockImg" src="./images/rock.png" alt="iRock" style="cursor:pointer" onclick="touchRock();" />
    </div>
  </body>

</html>